import { Avatar } from 'antd';
import React from 'react';
import styles from './AuditForms.less';


const AuditProgress = props => {
  // const {stepData} = props
  const stepData = props.auditProgressData


  const StepItem = () => {

    return (
      stepData && stepData.map((item, index) => {
        return (
          <div className={styles.stepItem} key={index}>
            <div className={styles.stepIcons}>
              <b className={styles.line}></b>
              {/* <b className={stepData.length === index + 1 ? styles.circle : styles.circleAgo} ></b> */}
              <b className={index === 0 ? styles.circle : styles.circleAgo} ></b>
            </div>
            <div className={styles.textWrap}>
            <div className={styles.name}>
              <Avatar
                shape="avatar"
                size="middle"
                icon={item.photo ? false : 'user'}
                src={item.photo ? `data:image/png;base64,${item.photo}` : false}
              />
              <div>
                <span>{item.auditor}</span>
                <span>{item.job ?? '职位'}</span>
              </div>
            </div>
            <div className={styles.content}>
              <span>{item.auditTime}</span>
              <span>
                审核状态：
                {item.opinion === '0' ? '同意': null}
                {item.opinion === '1' ? '不同意': null}
                {item.opinion === '2' ? '驳回': null}
                {item.opinion === '3' ? '发起': null}
              </span>
            </div>
            <div className={styles.remark}>
              备注：{item.remark ?? '无'}
            </div>
          </div>
         </div>
        )
      })
    )
  }

  return (
    <div className='formItems'>
       <StepItem></StepItem>
    </div>
  )
}
export default AuditProgress
